<template>
	<public-view navType="order" navTitle="评价" topBgShow="4" :navRight="false" navColor="#ffffff">
		<view class="content flex a-i-c f-d-c">
			<view class="goods-item-view flex f-d-c">
				<view class="top color-999 f-s-30" @click="goTo({url:'/pages/store/index?id='+item.merchant.id})">
					<image class="icon" src="@/static/images/my/gift-store999.svg" mode=""></image>
					{{item.merchant?.name}}
				</view>
				<block v-for="(itm, index) in item.goods_list" :key="index">
					<view class="goods-info flex a-i-c" @click="goTo({url:'/pages/shop/goodsInfo?id='+itm.goods_id})">
						<image class="image" :src="itm.goods_sku_product_image" mode=""></image>
						<view class="info-view">
							<view class="title f-s-26 color-333 f-w-b l-h-36">
								{{itm.goods_name||""}}
							</view>
							<view class="f-s-24" style="color: #bebebe;">
								规格{{itm.sku_text||""}}/数量{{itm.num||""}}
							</view>
						</view>
						<view class="money f-s-32 color-F32E2E f-w-b">
							<text class="f-s-24">￥</text>{{item.amount||0}}
						</view>
					</view>
				</block>
			</view>
			<view class="order-info-box">
				<view class="w-100 flex a-i-c j-c-b item">
					<view class="f-s-26 color-333 f-w-b flex a-i-c">
						<view class="" style="margin-right: 20rpx;">
							您对店铺商品满意吗？
						</view>
					</view>
				</view>
				<view class="back-money"></view>
				<view class="w-100 flex j-c-b item">
					<view class="flex a-i-c">
						<view class="f-s-26" style="color: #979797;margin-right: 32rpx;">
							店铺
						</view>
						<view class="flex a-i-c">
							<uni-rate :max="5" :value="merchant_star" @change="onChange" valueType="merchant_star" />
							<view class="f-s-32" style="color: #FFC83D;margin-left: 40rpx;">
								{{merchant_star}}
							</view>
						</view>
					</view>
				</view>
				<view class="w-100 flex j-c-b item" style="margin-bottom: ;">
					<view class="flex a-i-c">
						<view class="f-s-26" style="color: #979797;margin-right: 32rpx;">
							商品
						</view>
						<view class="flex a-i-c">
							<uni-rate :max="5" :value="goods_star" @change="onChange" valueType="goods_star" />
							<view class="f-s-32" style="color: #FFC83D;margin-left: 40rpx;">
								{{goods_star}}
							</view>
						</view>
					</view>
				</view>
				<view class="w-100 flex j-c-b item">
					<view class="flex a-i-c">
						<view class="f-s-26" style="color: #979797;margin-right: 32rpx;">
							配送
						</view>
						<view class="flex a-i-c">
							<uni-rate :max="5" :value="express_star" @change="onChange" valueType="express_star" />
							<view class="f-s-32" style="color: #FFC83D;margin-left: 40rpx;">
								{{express_star}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="order-info-box">
				<textarea class="textarea f-s-26" v-model="comment" placeholder="评价详情描述"></textarea>
				<view class="w-100 flex j-c-b item">
					<view class="upload-view flex f-w-w j-c-b w-100">
						<block v-for="(item, index) in images" :key="index">
							<upload-box  iconType="1" type="3" :current="index" :src="item" @del="delImage" @success="uploadSuccess"></upload-box>
						</block>
						<upload-box current="" src="" @success="uploadSuccess"></upload-box>
					</view>
				</view>
			</view>
			<view class="save-address-btn all-center color-fff f-s-30" @click="submitForm">
				提交评价
			</view>
		</view>
	</public-view>
</template>

<script>
	import uploadBox from "@/components/myComponents/uploadBox.vue"
	export default {
		components:{
			"upload-box":uploadBox
		},
		data() {
			return {
				order_id:"",
				item:{},
				images:[],
				merchant_star:0,
				goods_star:0,
				express_star:0,
				comment:""
			};
		},
		onLoad(o) {
			this.order_id = o.id
			this.getOrderInfo()
		},
		methods:{
			onChange(e){
				this[e.type] = e.value
			},
			uploadSuccess(e){
				let {index,url} = e
				if(index === ''){
					this.images.push(url)
				}else{
					this.images.splice(index,1,url)
				}
			},
			delImage(e){
				this.images.splice(e,1)
			},
			submitForm(){
				let that = this
				if(that.merchant_star<=0){
					uni.showToast({
						title:"商家评分不可为0",
						icon:"none"
					})
					return
				}
				if(that.goods_star<=0){
					uni.showToast({
						title:"商品评分不可为0",
						icon:"none"
					})
					return
				}
				if(that.express_star<=0){
					uni.showToast({
						title:"配送评分不可为0",
						icon:"none"
					})
					return
				}
				if(that.comment.length<=0){
					uni.showToast({
						title:"请输入评论内容",
						icon:"none"
					})
					return
				}
				let comments = []
				that.item.goods_list.map(val=>{
					comments.push({
						goods_id:val.goods_id,
						goods_sku_product_id:val.goods_sku_product_id,
						comment:that.comment,
						images:that.images,
						merchant_star:that.merchant_star,
						goods_star:that.goods_star,
						express_star:that.express_star
					})
				})
				that.util.postRequest({
					url:"v1/order/comment",
					data:{
						order_id:that.order_id,
						comments
					}
				}).then(res=>{
					uni.showToast({
						title:"发布成功"
					})
					let timeout = setTimeout(()=>{
						clearTimeout(timeout)
						uni.navigateBack()
					},2000)
				})
			},
			getOrderInfo(){
				let that = this
				that.util.postRequest({
					url:"v1/order/info",
					data:{
						order_id:that.order_id
					}
				}).then(res=>{
					console.log(res)
					that.item = res.data
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.back-money{
		width: 100%;
		padding-top: 32upx;
		border-top: 2upx solid #f2f2f2;
	}
	.save-address-btn{
		width: 702upx;
		height: 96upx;
		border-radius: 128upx;
		background: #EE8300;
		margin-top: 48upx;
	}
	.textarea{
		width: 596upx;
		background: #FAFAFA;
		border-radius: 12upx;
		margin-bottom: 16upx;
		padding: 26upx 30upx;
	}
	.next-ic{
		width: 20upx;
		height: 20upx;
	}
	.backmoney-beacuse{
		width: 500upx;
		height: 122upx;
		background: #F7F7F7;
		border-radius: 8upx;
		padding: 14upx;
		box-sizing: border-box;
	}
	.backmoney-view{
		width: 100%;
		background: #FFFFFF;
		padding: 16upx 30upx;
		border-radius: 20upx;
		margin-bottom: 16upx;
		height: 100upx;
	}
	.edit-btn-list{
		width: 100%;
		margin-top: 40upx;
		.item{
			width: 158upx;
			height: 58upx;
			border-radius: 30upx;
			font-size: 22upx;
		}
		.btn3{
			border: 2upx solid #2567F3;
			color: #2567F3;
		}
		.btn2{
			border: 2upx solid #EE8300;
			color: #EE8300;
		}
		.btn1{
			border: 2upx solid #CCCCCC;
			color: #666666;
			margin-right: 30upx;
		}
	}
	.order-info-box{
		width: 100%;
		background: #FFFFFF;
		padding: 50upx 28upx;
		border-radius: 20upx;
		margin-top: 24upx;
		.item{
			margin-bottom: 28upx;
			.upload-view{
				.item{
					
				}
				&::after{
					content: "";
					width: 160upx;
					height: 16upx;
				}
			}
		}
		.back-money{
			width: 100%;
			padding-top: 32upx;
			border-top: 2upx solid #f2f2f2;
		}
		.title{
			margin-bottom: 16upx;
		}
	}
	.goods-item-view{
		width: 100%;
		background: #FFFFFF;
		padding: 22upx 28upx 46upx 28upx;
		border-radius: 20upx;
		margin-bottom: 20upx;
		.goods-info{
			.info-view{
				width: 354upx;
				.title{
					margin-bottom: 6upx;
				}
			}
			.image{
				width: 116upx;
				height: 116upx;
				margin-right: 26upx;
				border-radius: 8upx;
			}
		}
		.top{
			width: 100%;
			margin-bottom: 16upx;
			.icon{
				width: 40upx;
				height: 40upx;
				margin-right: 16upx;
			}
		}
	}
	.content{
		width: 100%;
		padding: 32upx 30upx;
	}
</style>
